<template>
  <div class="bool_type_state">
    <span class="block_label_color small_label" :class="stateColor">{{data.label}}</span>
  </div>
</template>

<script>
export default {
  name: 'BoolType',
  props: {
    data: Object
  },
  computed: {
    // 根据是否类型返回相应class
    stateColor() {
      switch (this.data.value) {
        case 'True':
          // 是
          return 'bool_type_true'
        case 'False':
          // 否
          return 'bool_type_false'
        default:
          return ''
      }
    }
  }
}
</script>

<style scoped lang="less">
  /* 是否类型颜色 */
  // 是
  @boolTypeTrue: #00b4ff;
  // 否
  @boolTypeFalse: #7e8e9f;
  .bool_type_state {
    .block_label_color {
      min-width: 20px !important;
      height: 18px !important;
      line-height: 18px;
      padding: 0 !important;
      /* 是否类型颜色 */
      // 是
      &.bool_type_true {
        background-color: @boolTypeTrue;
      }
      // 否
      &.bool_type_false {
        background-color: @boolTypeFalse;
      }
    }
  }
</style>
